<%@ page session="false" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>  
<html>
	<head>
		<title><fmt:message key="form.title.1"/></title>
    	<link rel="stylesheet" type="text/css"  href="css/common.css" />


    <!--[if lt IE 5.5000]><style type="text/css">@import "css/IE50Fixes.css"; @import "css css/skinIE55Fixes.css";</style><![endif]-->
    <!--[if IE 5.5000]><style type="text/css">@import "css/IE55Fixes.css"; @import "css/skinIE55Fixes.css";</style><![endif]-->
    <!--[if gte IE 6]><style type="text/css">@import "css/IE60Fixes.css"; @import "css/skinIE60Fixes.css";</style><![endif]-->
    
		<script type="text/javascript" src="js/dynamic-forms.js"></script>
		<script type="text/javascript">
			function valida(){
				var last=true;
				var error="";
				var amigos=0;
				for (i=ind;i>0;i--){
					var name=document.getElementById("name_"+i);
					var email=document.getElementById("email_"+i);
					var exclude=document.getElementById("exclude_"+i);
					
					if (name.value=="" && email.value=="" && exclude.value==""){
						if (last==false) {
							tmperror="<fmt:message key='form.val.amigo.emptyrow'><fmt:param value='$i'/></fmt:message>\n";
							error+=tmperror.replace("$i",i);
						}						
					} else
					if (name.value=="" || email.value==""){
						tmperror="<fmt:message key='form.val.amigo.emptyfield'><fmt:param value='$i'/></fmt:message>\n";
						error+=tmperror.replace("$i",i);
						if (isNaN(exclude.value)){
							tmperror="<fmt:message key='form.val.amigo.exclude'><fmt:param value='$i'/></fmt:message>\n";
							error+=tmperror.replace("$i",i);
						}
						last=false;
					} else {
						if (!(email.value.indexOf('.') >= 1 && email.value.indexOf('@') >= 2)){
							tmperror="<fmt:message key='form.val.amigo.email'><fmt:param value='$i'/></fmt:message>\n";
							error+=tmperror.replace("$i",i);
						}
						if (isNaN(exclude.value)){
							tmperror="<fmt:message key='form.val.amigo.exclude'><fmt:param value='$i'/></fmt:message>\n";
							error+=tmperror.replace("$i",i);
						}
						last=false;
						amigos++;
					}
				}
				
				if (amigos<3) error+="<fmt:message key='form.val.amigo.min'/>";
				if (amigos>25) error+="<fmt:message key='form.val.amigo.max'/>";
				
				if (error=="") return true;
				alert(error);
				return false;
			}
		</script>
	</head>
	<body class="ns-0">
        <div id="globalWrapper">
      <div class="bar">&nbsp;</div>
        <div id="content">
		<h1 class="firstHeading"><fmt:message key="form.welcome"/></h1>
        <div id="column-content">
	<div id="bodyContent">
	    <div id="contentSub"></div>
	
		
	    	<div style="border: 1px solid #6eb927; padding: .7em; background-color:#ecf2e6; margin-top: 0;">
			<fmt:message key="form.step1"/>
		</div>

		
		<form method="post" onsubmit="return valida();">
		<div id="errors">
		<spring:bind path="amigo">
			<ul>
				<c:forEach items="${status.errorMessages}" var="errorMessage">
					<li style="color:red"><c:out value="${errorMessage}"/></li>
				</c:forEach>
			</ul>
		</spring:bind>
		</div>
				
		<table id="main" style="border: 1px solid #aaa; margin: 0; padding: 0; width: 100%;">
			<tr>
				<td style="vertical-align:top; width: 70%; padding-right: .6em;">
					<div class="hp_box">
					<table id="listaAmigos">	
						<tr >
							<td colspan="4" style="padding: 10pt"><label><fmt:message key="form.instr.mails"/></label></td>
						</tr>
						<tr>
							<td style="font-size: 90%; text-align: center;"><fmt:message key="form.col.id"/></td>
							<td style="font-size: 90%; text-align: center;"><fmt:message key="form.col.name"/></td>
							<td style="font-size: 90%; text-align: center;"><fmt:message key="form.col.mail"/></td>
							<td style="font-size: 90%; text-align: center;"><fmt:message key="form.col.exclude"/></td>
							<td style="font-size: 90%; text-align: left;"><a href="faq.html#inst" target="faq"><img src="help.gif"/></a></td>
						</tr>
						
						<tr id="am_1">
							<spring:bind path="amigo.id">
								<input type="hidden" name="id" value="1"/>
								<td>1</td>
							</spring:bind>
						
							<spring:bind path="amigo.name">
								<td><input type="text" name="name" id="name_1"/></td>
							</spring:bind>
							
							<spring:bind path="amigo.email">
								<td><input type="text" name="email" id="email_1"/></td>
							</spring:bind>
		
							<spring:bind path="amigo.exclude">
								<td><input type="text" name="exclude" id="exclude_1" size="2" maxlength="2"/></td>
							</spring:bind>
						</tr>
		
						<tr id="am_2">
							<spring:bind path="amigo.id">
								<input type="hidden" name="id" value="2"/>
								<td>2</td>
							</spring:bind>
						
							<spring:bind path="amigo.name">
								<td><input type="text" name="name" id="name_2"/></td>
							</spring:bind>
							
							<spring:bind path="amigo.email">
								<td><input type="text" name="email" id="email_2""/></td>
							</spring:bind>
		
							<spring:bind path="amigo.exclude">
								<td><input type="text" name="exclude" size="2" maxlength="2"  id="exclude_2"/></td>
							</spring:bind>
						</tr>
						
						<tr id="am_3">
							<spring:bind path="amigo.id">
								<input type="hidden" name="id" value="3"/>
								<td>3</td>
							</spring:bind>
						
							<spring:bind path="amigo.name">
								<td><input type="text" name="name"  id="name_3"/></td>
							</spring:bind>
							
							<spring:bind path="amigo.email">
								<td><input type="text" name="email"  id="email_3"/></td>
							</spring:bind>
		
							<spring:bind path="amigo.exclude">
								<td><input type="text" name="exclude" size="2" maxlength="2"  id="exclude_3"/></td>
							</spring:bind>
						</tr>
		
						<tr id="newAmigoButton">
							<td colspan="4"><a href="javascript:addAmigo()"><fmt:message key="form.add"/></td>
						</tr>
					</table>
					</div>
				</td>
			</tr>
			<tr>
				<td>
					<table id="submit">	
						<tr>
							<td colspan="2" align="center"><input type="submit" value="<fmt:message key="form.next"/>" name="_target1"/></td>
							<td colspan="2">&nbsp;</td>
						</tr>							
					</table>
				</td>
			</tr>
			
		</table>
			
		</form>		

		<%@ include file="footer.jsp" %>
		
	</div>
	</div>
	</div>
	</div>

	</body>
</html>